<template>
  <mu-table ref="tableRef" v-bind="tableProps" @add="add" @edit="edit" @detail="detail" @delete="remove" @event="handleEvent">
    <template #ts="row">
      <el-tag type="success">测试 + {{ row.guid }}</el-tag>
    </template>
  </mu-table>
</template>

<script setup lang="ts">
import MuTable from '@/components/MuTable/MuTable.vue'
import type { IProps } from '@/components/MuTable/prop.ts'
import { useTemplateRef, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const tableRef = useTemplateRef<InstanceType<typeof MuTable>>('tableRef')
onMounted(() => {
  tableRef.value?.load()
})
const tableProps = reactive<IProps>({
  queryFilter: [
    { name: 'appName', label: '名称', type: 'ElInput' },
    { name: 'title', label: '标题', type: 'ElInput' },
    { name: 'deptName', label: '部门', type: 'ElInput' },
    { name: 'content', label: '内容', type: 'ElInput' },
    { name: 'pickDate', label: '选择日期', type: 'ElDatePicker', props: { type: 'daterange' } },
    { name: 'cascader', label: '级联选择', type: 'ElCascader', props: { options: [{ value: 'zhejiang', label: 'Zhejiang', children: [{ value: 'hangzhou', label: 'Hangzhou', children: [{ value: 'xihu', label: 'West Lake' }] }] }] } },
    { name: 'switch', label: '开关', type: 'ElSwitch' },
    { name: 'radio', label: '单选', type: 'ElRadio', options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }] },
    { name: 'checkbox', label: '多选', type: 'ElCheckbox', options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }] },
    { name: 'selectObj', label: '选择', type: 'ElSelect', options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }] },
  ],
  table: {
    id: 'testTable',
    url: '/api/test-list',
    columns: [
      { type:'seq', width: 70 },
      { field: 'name', title: '名称', width: 400  },
      { field: 'code', title: '编码', width: 200 },
      { field: 'deptName', title: '部门名称', width: 200 },
      { field: 'ts', title: '测试', width: 200, slots: { default: 'ts' } },
      { field: 'enabled', title: '是否启用', width: 155 },
    ],
    operatorExBtn: [
      { name: 'apply', label: '申请', icon: 'clarity:contract-line', auth: 'myApply' },
      { name: 'submit', label: '提交', icon: 'mdi:hand-coin-outline', auth: 'mySubmit' },
    ]
  }
})
const add = () => {
  ElMessage.success('add')
  // tableProps.exParams = {
  //   bilibili: Math.random()
  // }
  tableProps.queryFilter?.splice(0, 1)
  // tableProps.table!.size = 'medium'
  // tableProps.pagination = {
  //   size: 'default'
  // }
  // tableRef.value?.load()
}
const edit = (row) => {
  ElMessage.success('edit')
  console.log(row)
}
const remove = (row) => {
  ElMessage.success('delete')
  console.log(row)
}
const detail = (row) => {
  ElMessage.success('detail')
  console.log(row)
}
const handleEvent = ({ command, row }) => {
  ElMessage.success(command)
  console.log(row)
}
</script>

<style scoped>

</style>